Selector Universal
-
Este selector indica que las propiedades pertenecientes a este se aplicarán a todos los elementos del documento, es decir, es un Selector de uso global; se define con el uso del "asterisco (*)", de la siguiente forma:
Selector por Tipo de Elemento
-
En este caso en el selector se ingresa directamente el tipo de elemento HTML, procediendo así a aplicarse los estilos CSS en cuestión a todos los elementos de este mismo tipo que se encuentren en el documento HTML.
De esta forma:
Clases
-
Las clases cuentan con la ventaja de poder elegir a cuál elemento se le aplicarán los estilos, sin importar de qué tipo se trate, siempre y cuando esta se vincule correctamente a este; por lo tanto, al utilizar un selector de tipo clase los estilos únicamente se aplicarán a los elementos que realicen el llamado a la clase con el uso del atributo "class" con nombre de dicha clase por valor, sin importar cuál sea el tipo de estos elementos ni el número de veces que la clase sea llamada.
De esta forma:
Por otro lado, desde el documento de estilos CSS la clase se define utilizando un "punto" (.) seguido del nombre de esta, de la siguiente forma:
Id
-
Recordemos que los "id" son identificadores únicos de cada elemento, por lo tanto, al utilizarlos como selector estamos indicando que los estilos se apliquen específicamente al elemento que posea dicho id; por lo tanto, es necesario que el elemento HTML posea declarado un id en el atributo "id" de la siguiente forma:
Por el lado del documento de estilos CSS los id se declaran con un "hashtag (#)" seguido del id correspondiente:
Atributo
-
En CSS también se pueden utilizar los atributos de un elemento HTML como selectores; para hacerlo, es necesario incluir tanto el atributo en cuestión como su valor dentro de "corchetes ([])", incluyendo los símbolos (=) y las comillas ("" o '') de la siguiente forma:
Nota: Realmente esta técnica no solo se puede utilizar con los atributos, sino que realmente se puede aplicar con cualquier texto que se encuentre en el interior de la viñeta de apertura de un elemento sin importar si cumple con el formato de un atributo o si es algo de propia autoría.
Descendientes
-
Este tipo de selector tiene una particularidad: se trata de aplicar un condicional a los elementos seleccionados; por lo tanto, los estilos se aplicarán a los elementos que cumplan estas condiciones, las cuales consisten en los elementos padres de los elementos en cuestión, es decir, estos estilos se aplicarán a aquellos elementos de un tipo en particular que se encuentren dentro de otro elemento preestablecido, de la siguiente forma:
Como se puede ver en la imagen, este ejemplo se basa en un párrafo que se encuentra dentro de un h2; en este tipo de casos es cuando se aplican los selectores descendientes, ya que se tiene en cuenta tanto al contenedor como al elemento hijo de la siguiente forma:
Como se puede observar en el ejemplo, primero se coloca el elemento padre seguido del elemento hijo; de esta forma, a los elementos que cumplan con el condicional "párrafos dentro de un h2" se les aplicarán los estilos en cuestión.
Otro caso de los Selectores Descendientes
Otra alternativa es aplicar una variante de la condicional: en vez de definir el tipo del elemento padre también se puede definir una característica de este, en este caso una clase que este posea como en el siguiente ejemplo:
Como se puede ver en este ejemplo, el elemento h2 en el que se encuentra el párrafo posee la clase "h2-class", por lo tanto cumpliría con la condicional definida a continuación:
En esta última imagen se definiría: en aquellos párrafos que se encuentren dentro de elementos que posean la clase "h2-class" se aplicarán los estilos en cuestión.
Nota: esto no se detiene allí, se pueden aplicar más niveles; por ejemplo, en el caso de que dentro del párrafo se encontrara un elemento "span", este se podría definir perfectamente ubicando a la izquierda de "p" en la estructura del código CSS, resultando en un condicional semejante a: aplica estos estilos en todos aquellos "span" que se encuentren dentro de un párrafo dentro de un h2 o dentro de un elemento con la clase "h2-class"
:first-child
-
Se utiliza en los casos en que una clase se utiliza en repetidos elementos del mismo tipo de un mismo contenedor; su función se trata de una forma de aplicar un estilo únicamente al primer elemento, es decir, por ejemplo si se diese el caso de un formulario con múltiples input, el selector first-child permite seleccionar únicamente al primer elemento de todos para aplicarle un estilo individual.
La estructura de este selector consiste en el selector del contenedor en cuestión (puede ser el id, la clase, o el tipo de elemento), seguido de dos puntos (:) y el valor first-child de la siguiente forma:
:nth-child()
-
Este tipo de selector es complementario a first-child, simplemente con la diferencia de que permite seleccionar cualquiera de los elementos repetidos para aplicarle los estilos particulares; la estructura de esta propiedad es similar a la de first-child: primero se ingresa el selector del contenedor en cuestión (puede ser el id, la clase, o el tipo de elemento), seguido de dos puntos (:) y el valor nth-child, seguido inmediatamente por el número entre paréntesis del elemento que se desea seleccionar, como se puede apreciar en el siguiente ejemplo:
Nota: La numeración de los elementos es definida por el orden de estos en el código HTML.
:last-child
-
Este selector es el opuesto de first-child, ya que en vez de seleccionar al primer elemento este selecciona el último; fuera de eso no existe una verdadera diferencia en el efecto o en la sintaxis de esta propiedad con first-child.
:valid
-
Este tipo de selector selecciona los elementos input que posean un valor válido.
Un ejemplo de uso de este selector es aplicar un estilo en específico cuando el usuario ingrese un valor válido en un input de un formulario.
